<template>
	<view class="content">
		<view class="course-info">
			<image class="course-image" :src="data.courseInfo.coverImg" mode="aspectFit"></image>
			<view class="course-right">
				<text class="course-name">听选信息--{{data.courseInfo.name}}</text>
				<text class="course-desc">适用于:{{data.courseInfo.desc}}</text>
				<image class="course-favorite" @click="collect()"
					:src="status=='1'?'/static/shoucang.png':'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/c5cfa7f64f5940dda8fb36e704d75585_mergeImage.png'"></image>
			</view>
		</view>
		<text class="course-items" v-for="(items, index) in data.courseItems" :key="index"
			@tap="handleClickCourse(items.id,items.productId)">{{items.name}}</text>
		<view v-if="xuanzhede.length!=0">
			<ProcessTime :time='shijiancdu' :number='jige' @handleEvent="handleClickModal"
				@handleEvent2="handleClickNext" />
			<uni-popup class="popup" ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
				<view class="popup-top">
					<text class="popup-title">
						已选择内容
					</text>
					<text class="popup-close" @tap="handleClosePopup">
						取消
					</text>
				</view>
				<view class="popup-content">
					<view class="popup-items" v-for="(item,index) in xuanzhede" :key="index">
						<text class="popup-course">
							<!-- 课后单词表-Starter Module -->
							{{item.resourceName}}
						</text>
						<text class="popup-delete" @tap="handleDeleteItem(index)">
							删除
						</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import ProcessTime from '@/components/ProcessTime/index.vue';

	export default {
		components: {
			ProcessTime,
		},
		data() {
			return {
				data: {
					id: '',


					courseInfo: {
						name: '听选信息--八年级上册',
						coverImg: '',
						desc: '',
						isFavorite: false,
					},
					courseItems: [],
					page: 1,
					pageSize: 15,
					shijiancdu: 0,
					jige: 0,
					// xomde_xuanzhede: [],
					xuanzhede: [],
					isLastPage:false,
					tabarTitle:"",
					status:''
				}
			}
		},
		// watch: {
		// 	xuanzhede(newVal){
		// 		console.log(newVal,222)
		// 	},
		//     time(newVal) {
		// 		console.log(newVal,'12')
		//        // 处理message变化的逻辑
		//      },
		//      number(newVal, oldVal) {
		// 		 console.log(newVal,'11')
		//        // 处理anotherProp变化的逻辑
		//      }
		//   },
		onLoad(option) {
			
			
			this.id = parseInt(option.id);
			this.tabarTitle = option.title;
			this.details()
		},

		onShow() {
			const that = this

			that.datashuju()
			// 在H5环境下刷新页面
			// if (process.env.VUE_APP_PLATFORM === 'h5') {
			//   location.reload();
			// }


		},
		// created() {
		// 	console.log(222)
		// 	this.xuanzhede = uni.getStorageSync('xuanzhede') || []; ///从本地缓存中同步移除指定key的数据
		// 	this.shijiancdu = this.totalSum(this.xuanzhede, 'minute')
		// 	this.jige = this.xuanzhede.length
		// 	console.log(this.jige)
		// 	console.log(this.shijiancdu)
		// },
		methods: {


			// refreshPage() {
			//   // 将isRefreshing设置为true，表示正在刷新页面
			//   this.isRefreshing = true

			//   // 在这里执行获取最新数据的操作，并更新到页面的data对象中
			//   // 可以使用异步请求来获取数据，比如使用uni.request或uni.$http等方法
			//   // 这里以setTimeout简单模拟数据请求的耗时操作
			//   setTimeout(() => {
			//     // 更新数据，并将isRefreshing设置为false，表示刷新完成
			//     // 这里假设获取到了最新的数据，用newData表示
			//     this.datashuju();

			//     this.isRefreshing = false
			//   }, 2000)
			// },
			collect(){
				var that = this
				if(that.status == '0'){
					that.status = '1';
				}else{
					that.status = '0'
				}
				var data = {
					id: that.id,
					status: that.status,
				}
				let url = "teacher/collect";
				that.$post(url, data).then(res => {
					if (res.code != 0) {
						that.details();
						// var feilei_neirong = res.data;
						
						// if (feilei_neirong.length != 0) {
						//
						// 	feilei_neirong.forEach(rect => {
						//
						// 		that.data.courseItems.push(rect);
						// 	});
						// 	console.log(that.data.courseItems = that.data.courseItems)
						// 	uni.hideLoading()
						// } else {
						// 	that.isLastPage = true;
						// 	uni.showToast({
						// 		title: '没有更多的数据了',
						// 		icon: 'none',
						// 		duration: 2000
						// 	});
						// }
						// that.courseInfo.desc = res.data.gradeName;
					} else {
						
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
					
					
				})
			},
		

			datashuju() {
				const that = this
				console.log(1111)
				that.xuanzhede = uni.getStorageSync('xuanzhede') || []; ///从本地缓存中同步移除指定key的数据
				// console.log(this.xuanzhede=this.xomde_xuanzhede)

				console.log(that.xuanzhede.length,9999)
				that.shijiancdu = that.totalSum(that.xuanzhede, 'minute')
				that.jige = that.xuanzhede.length
				// this.shijiancdu = this.totalSum(this.xuanzhede,'minute')
				// this.jige = this.xuanzhede.length
				console.log(that.jige)
				console.log(that.shijiancdu)
				this.$forceUpdate();
			},
			/**
			 * 计算给定字段的总计
			 * @param {Array} array 对象数组数据
			 * @param {String} computedField  需要进行合计的字段名
			 * @return {Number} 合计后的结果
			 */
			totalSum(array, computedField) {
				if (!array || array.length === 0) {
					return 0
				} else {
					return array.reduce((value, item) => value + +item[computedField], 0)
				}
			},
			/**
			 * 计算给定字段的总计结束**/
			details() {
				var that = this
				var data = {
					id: that.id
				}
				let url = "";
				if(this.tabarTitle == '听说'){
					url = "hearsay/detail";
				}
				if(this.tabarTitle == '听力'){
					url = "listening/detail";
				}
				if(this.tabarTitle == '跟读'){
					url = "repeat/detail";
				}
				if(this.tabarTitle == '笔试'){
					url = "writing/detail";
				}
				if(this.tabarTitle == '音标'){
					url = "soundmark/detail";
				}
				if(this.tabarTitle == '典范'){
					url = "modelsp/detail";
				}
				if(this.tabarTitle == '新概念'){
					url = "newconcept/detail";
				}
				if(this.tabarTitle == '黑布林'){
					url = "blackplum/detail";
				}
				that.$post(url, data).then(res => {
					if (res.code != 0) {


						that.data.courseInfo.name = res.data.productName;
						that.data.courseInfo.coverImg = res.data.cover_full;
						that.status = res.data.collect
						that.data.courseInfo.desc = res.data.gradeName;
						console.log(res)
						that.list()

					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}


				})
			},
			list() {
				var that = this
				var data = {
					id: that.id,
					page: that.data.page,
					pageSize: that.data.pageSize,
					// order:
				}
				let url = "";
				if(this.tabarTitle == '听说'){
					url = "hearsay/chapterlist";
				}
				if(this.tabarTitle == '听力'){
					url = "listening/chapterlist";
				}
				if(this.tabarTitle == '跟读'){
					url = "repeat/chapterlist";
				}
				if(this.tabarTitle == '笔试'){
					url = "writing/chapterlist";
				}
				if(this.tabarTitle == '音标'){
					url = "soundmark/chapterlist";
				}
				if(this.tabarTitle == '典范'){
					url = "modelsp/chapterlist";
				}
				if(this.tabarTitle == '新概念'){
					url = "newconcept/chapterlist";
				}
				if(this.tabarTitle == '黑布林'){
					url = "blackplum/chapterlist";
				}
				console.log(data)
				that.$post(url, data).then(res => {
					if (res.code != 0) {
						
						var feilei_neirong = res.data;
						
						if (feilei_neirong.length != 0) {
							
							feilei_neirong.forEach(rect => {
								
								that.data.courseItems.push(rect);
							});
							console.log(that.data.courseItems = that.data.courseItems)
							uni.hideLoading()
						} else {
							that.isLastPage = true;
							uni.showToast({
								title: '没有更多的数据了',
								icon: 'none',
								duration: 2000
							});
						}
						// that.courseInfo.desc = res.data.gradeName;
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}


				})
			},
			onReachBottom() {
				var that = this
				if(!that.isLastPage) {
					uni.showLoading({
						title: '加载中...',
						mask : true //遮蔽层
					})
					console.log(1231123);
					that.data.page += 1;
					console.log(that.page)
					this.list();
				}

			},
			handleClickCourse(id, productId) {

				console.log(id)
				console.log(productId)
				uni.navigateTo({
					url: `/pages/secCatalogue/index?id=${id}&typd=${productId}&title=${this.tabarTitle}`,
				});
			},
			handleClickModal(e) {
				this.$refs.popup.open('bottom');
			},
			handleClickNext(e) {
				uni.navigateTo({
					url: `/pages/submitWork/index`,
				});
			},
			handleClosePopup() {
				this.$refs.popup.close();
			},
			handleDeleteItem(e) {
				console.log(e)
				let delItem = this.xuanzhede[e]
				console.log(delItem.id)
				this.xuanzhede.splice(e, 1)
				this.shijiancdu = this.totalSum(this.xuanzhede, 'minute')
				this.jige = this.xuanzhede.length
				this.xuanzhede.forEach(item => {

					if (item.id == delItem.id) item.isMark = false
				})
				console.log(this.xuanzhede)
				this.xuanzhede = this.xuanzhede
				uni.setStorageSync('xuanzhede', this.xuanzhede);
				this.$forceUpdate();





			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.course-info {
		width: 686rpx;
		height: 314rpx;
		border-radius: 24rpx;
		background-color: #FFFFFF;
		padding: 30rpx 0 30rpx 30rpx;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(74, 144, 246, 0.06);
	}

	.course-image {
		width: 180rpx;
		height: 254rpx;
		border-radius: 24rpx;
		margin-right: 30rpx;
	}

	.course-right {
		display: flex;
		flex-direction: column;
		padding-top: 24rpx;
	}

	.course-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222222;
		margin-bottom: 24rpx;
	}

	.course-desc {
		flex: 1;
		font-size: 26rpx;
		color: #666666;
	}

	.course-favorite {
		width: 48rpx;
		height: 46rpx;
	}

	.course-items {
		width: 686rpx;
		height: 88rpx;
		border-radius: 24rpx;
		background-color: #FFFFFF;
		margin-bottom: 24rpx;
		text-indent: 48rpx;
		line-height: 88rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(74, 144, 246, 0.06);
		position: relative;
	}

	.course-items::before {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 24rpx;
		content: '';
		width: 8rpx;
		height: 8rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7c03dfa508ef99a667b9e2fe9ecec0cdfde7e8445d8b0fcf7e139bc7d1b0d167) 100% no-repeat;
		background-size: 100% 100%;
	}

	.course-items::after {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 32rpx;
		content: '';
		width: 10rpx;
		height: 18rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng28651e056197383a8fc6fdae272dfc5ce48ef18ef565af957dc6aa6e2275718e) 100% no-repeat;
		background-size: 100% 100%;
	}

	.popup {
		z-index: 998;
	}

	.popup-top {
		width: 100%;
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: rgba(248, 248, 248, 1);
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.popup-title {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.popup-close {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.popup-content {
		width: 100%;
		min-height: 384rpx;
		padding: 40rpx 32rpx 168rpx 40rpx;
		box-sizing: border-box;
		margin-bottom: 128rpx;
	}

	.popup-items {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup-course {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.popup-delete {
		overflow-wrap: break-word;
		color: rgba(41, 121, 255, 1);
		font-size: 26rpx;
		font-family: PingFangSC-Regular;
		font-weight: normal;
		white-space: nowrap;
		line-height: 36rpx;
	}
</style>